/**
 * 培训大纲主页面
 */
<template>
	<el-container style="padding: 10px 10px 0 10px;">
		<el-aside width="400px">
			<vp-card>
				<vp-table 
					:data="tableData" 
					row-key="id" 
					highlight-current-row
					ref="tableRef" 
					@row-click="handleClickPosition"  
					style="width: 100%;"
					border stripe
					v-loading="loading"
					:height="`calc(100vh - 164px)`">
					<el-table-column prop="bh" show-overflow-tooltip >
						<template #header><vp-label zh="岗位" en="Position"/></template>
						<template #default="scope">
							<p>{{scope.row.bh}}</p>
							<p>{{scope.row.mc}}</p>
						</template>
					</el-table-column>
					<el-table-column prop="userCount" show-overflow-tooltip width="70" align="center">
						<template #header><vp-label zh="人数" en="Num"/></template>
					</el-table-column>
					<el-table-column width="110">
						<template #header><vp-label-operations/></template>
						<template #default="scope">
							<el-space>
								<vp-btn-edit text v-auth="'trainingOutline.edit'" @click="handleEdit(scope.row)"/>
								<vp-btn-del text v-auth="'trainingOutline.edit'" @click="handleDelete(scope.row)"/>
								<vp-btn-view text v-if="!auth('trainingOutline.edit')" @click="handleView(scope.row)"/>
							</el-space>
						</template>
					</el-table-column>
				</vp-table>
				<vp-btn-add type="primary" class="mt5 w100" v-auth="'trainingOutline.edit'" @click="handleAdd"/>
			</vp-card>
		</el-aside>

		<el-main style="padding: 0px 0px 10px 10px;" class="layout-parent">
			<vp-tabs v-model="activeTab" class="w100" type="border-card">
				<vp-tab-pane name="courseRequirementTab">
					<template #label><vp-label zh="课程要求" en="Course Requirement"/></template>
					<CourseRequirementTab v-if="activeTab === 'courseRequirementTab'" :positionId="currentPosition.id"></CourseRequirementTab>
				</vp-tab-pane>
				<vp-tab-pane name="otherRequirementTab">
					<template #label><vp-label zh="其他要求" en="Other Requirement"/></template>
					<OtherRequirementTab v-if="activeTab === 'otherRequirementTab'" :positionId="currentPosition.id"></OtherRequirementTab>
				</vp-tab-pane>
				<vp-tab-pane name="authorizedPersonTab">
					<template #label><vp-label zh="授权人员" en="Authorized Person"/></template>
					<AuthorizedPersonTab v-if="activeTab === 'authorizedPersonTab'" :positionId="currentPosition.id"></AuthorizedPersonTab>
				</vp-tab-pane>
				<vp-tab-pane name="positionDescriptionTab">
					<template #label><vp-label zh="岗位说明书" en="Position Description"/></template>
					<PositionDescriptionTab 
						v-if="activeTab === 'positionDescriptionTab'" 
						:positionId="currentPosition.id" 
						:gwsmsfjglid="currentPosition.gwsmsfjglid"
						height="calc(100vh - 268px)">
					</PositionDescriptionTab>
				</vp-tab-pane>
				<vp-tab-pane name="operationRecordTab">
					<template #label><vp-label zh="操作记录" en="Operation Record"/></template>
					<VpOperationRecordCard 
						v-if="activeTab === 'operationRecordTab'" 
						:id="currentPosition.id" 
						height="calc(100vh - 268px)">
					</VpOperationRecordCard>
				</vp-tab-pane>
			</vp-tabs>
		</el-main>
		<!-- 新增/修改岗位页面 -->
		<EditPosition ref="editPositonRef" @form-submited="loadDataList"></EditPosition>
	</el-container>
</template>

<script setup lang="ts" name="trainingOutline">
import { ref, onMounted, defineAsyncComponent } from 'vue';
import request from '/@/utils/request';
import CourseRequirementTab from './copmonent/tabs/CourseRequirementTab.vue';
import OtherRequirementTab from './copmonent/tabs/OtherRequirementTab.vue';
import AuthorizedPersonTab from './copmonent/tabs/AuthorizedPersonTab.vue';
import PositionDescriptionTab from './copmonent/tabs/PositionDescriptionTab.vue';
import VpOperationRecordCard from '/@/components/vp/operationRecord/VpOperationRecordCard.vue';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import { auth } from '/@/utils/authFunction';

	const EditPosition = defineAsyncComponent(() => import('./copmonent/dialogs/EditPosition.vue'));

	// 当前选中岗位
	const currentPosition = ref({
		id: "",
		bh: "",
		mc: "",
		gwsmsfjglid: "",
	});

	const loading = ref(false);
	const tableData = ref([]);
	const tableRef = ref();
	const activeTab = ref('courseRequirementTab');
	const editPositonRef = ref();

	// 加载列表数据
	const loadDataList = () => {
		loading.value = true;
		request.get('/training/position/list').then(res => {
			tableData.value = res?.data || [];
			if (tableData.value && tableData.value.length > 0) {
				// 如果岗位没有被选中，则默认选中第一个岗位
				if (!currentPosition.value.id) {
					currentPosition.value = {
						...tableData.value[0] as any,
					}
				}
				// 选中指定行
				tableRef.value.setCurrentRow(currentPosition.value);
			}
		}).finally(() => {
			loading.value = false
		})
	}

	// 组件挂载后事件
	onMounted(() => {
		loadDataList()
	})

	// 点击岗位列表
	const handleClickPosition = (position: any) => {
		currentPosition.value = {
			...position
		}
	}

	// 新增岗位
	const handleAdd = () => {
		editPositonRef.value.handleOpen('add');
	}

	// 修改岗位
	const handleEdit = (row: any) => {
		editPositonRef.value.handleOpen('edit', row.id);
	}

	// 查看岗位
	const handleView = (row: any)=>{
		editPositonRef.value.handleOpen('view', row.id);
	}

	// 删除岗位
	const handleDelete = (row: any) => {
		VpMessageBox.confirmDelete().then(()=>{
			request.delete(`/training/position/${row.id}`).then(res => {
				currentPosition.value.id = '';
				loadDataList();
			})
		});
	}

</script>
<style scoped lang="scss">
</style>
